@extends('layout')

@section('content')
    <link rel="stylesheet" href="{{asset('css/about.css')}}">
    <link rel="stylesheet" href="{{asset('css/business.css')}}">
    <div class="container about-content">
        <div class="row">
            <div class="col-sm-3" style="text-align: center;">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">全国港口吞吐量</a>
                    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">主要港口吞吐量</a>
                    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">集装箱吞吐量</a>
                </div>
                @component('gongao',['gonggao'=>$gonggao])
                @endcomponent
            </div>
            <div class="col-sm-9">

                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <div class="part-title-box">
                            <div class="part-title">全国港口吞吐量</div>
                        </div>
                        <div class="content-container">
                            <div class="content-title">新闻分析：全国港口吞吐量</div>
                            {{--<div class="content-little-title">来源：新华社  </div>--}}
                            <div class="line"></div>
                            <div class="content-info">
                                <div id="all" data="{{$businesses[0]}}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <div class="part-title-box">
                            <div class="part-title">主要港口吞吐量</div>
                        </div>
                        <div class="content-container">
                            <div class="content-title">新闻分析：主要港口吞吐量</div>
                            {{--<div class="content-little-title">来源：新华社   </div>--}}
                            <div class="line"></div>
                            <div class="content-info" >
                                <div id="main" data="{{$businesses[1]}}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <div class="part-title-box">
                            <div class="part-title">集装箱吞吐量</div>
                        </div>
                        <div class="content-container">
                            <div class="content-title">新闻分析：集装箱吞吐量</div>
                            {{--<div class="content-little-title">来源：新华社  </div>--}}
                            <div class="line"></div>
                            <div class="content-info">
                                <div id="some" data="{{$businesses[2]}}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{asset('js/lib/echarts.simple.min.js')}}"></script>
    <script src="{{asset('js/business.js')}}"></script>
@endsection
